import { aliOssFileDownload, bigFileDownload, smallFileDownload } from "./code";
import { useEffect, useState } from "react";
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css";
import "./style.less";

// 初始化 highlight.js
// hljs.highlightAll();

function CodeHighlighter({
  code,
  language,
}: {
  code: string;
  language: string;
}) {
  const [highlightedCode, setHighlightedCode] = useState("");

  useEffect(() => {
    // 使用highlight.js高亮代码
    const highlighted = hljs.highlight(code, { language }).value;
    setHighlightedCode(highlighted);
  }, [code, language]);

  return (
    <pre>
      <code
        className={`hljs ${language}`}
        dangerouslySetInnerHTML={{ __html: highlightedCode }}
      />
    </pre>
  );
}

export const FileDownload = ({
  type,
}: {
  type: "small" | "big" | "aliOSS";
}) => {
  return (
    <div>
      {type === "small" && (
        <>
          <ul className="w-[60vw] mb-2">
            <li className="mb-2">备注：</li>
            <li>
              因为大文件下载fetch请求然后再转blob的方式会导致内存占用过高，耗时过久，会导致浏览器长时间无响应，所以这个方法用来做小文件的下载比较合理
            </li>
            <li>
              优点是可以直接给下载文件赋名称，不管是普通链接还是阿里oss链接
            </li>
          </ul>
          <CodeHighlighter code={smallFileDownload} language="javascript" />
        </>
      )}
      {type === "big" && (
        <>
          <ul className="w-[60vw] mb-2">
            <li className="mb-2">备注：</li>
            <li>
              大文件下载，普通资源链接可用，但是阿里oss链接不可用，因为阿里oss链接是签名链接，无法直接下载
            </li>
          </ul>
          <CodeHighlighter code={bigFileDownload} language="javascript" />
        </>
      )}
      {type === "aliOSS" && (
        <>
          <ul className="w-[60vw] mb-2">
            <li className="mb-2">备注：</li>
            <li>aliOSS下载，需要使用预签名url的方式进行下载</li>
          </ul>
          <CodeHighlighter code={aliOssFileDownload} language="javascript" />
        </>
      )}
    </div>
  );
};
